<template>
  <div class="max">
    <div class="top">
      <van-icon name="arrow-left" size="20" style="margin:0 10px"/>
      <van-image
      round
      width="2rem"
      height="2rem"
      src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/__80px_u1135.jpg"
      style="vertical-align: middle;"
      @click="this.$router.go(-1)"
      />
      <span style="margin-left:10px">Daisy</span>
      <van-rate v-model="value" :count="1" style="margin-left:50%" size="20"/>
      <van-icon name="share-o" size="20" style="margin-left:20px" @click="showShare=true"/>
      <van-share-sheet
        v-model:show="showShare"
        :options="options"
      />
    </div>
    <!-- 日记部分 	-->
    <div style="width:94%;margin:60px auto;height:250px">
      <p>北京华睿整形医院开眼角手术日记</p>
      <p><span style="font-size:12px;color:#999999">共12篇</span></p>
      <div class="pic">
        <div style="position: relative;">
          <img src="https://www.pmdaniu.com/storages/123370/9f2027314c…s/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1353.png">
          <p class="suQ">术前</p>
        </div>
        <div style="position: relative;">
          <img src="https://www.pmdaniu.com/storages/123370/9f2027314c…s/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1353.png">
          <p class="suH">术后</p>
        </div>
      </div>
      <p class="kai">#开眼角</p>
      <div class="money">
        <img src="https://www.pmdaniu.com/storages/123370/9f2027314c7ae8536aef5b6d962b1d9c-57026/images/%E5%B8%96%E5%AD%90%E8%AF%A6%E6%83%85/u6248.png" style="margin:0 10px;float:left">
        <p style="height:20px;line-height:20px"><span>【北京华睿】开眼角手术眼睛放大</span></p>
        <p style="margin-top:10px"><span style="color:orange">￥1999</span><span class="shop">去购买</span></p>
      </div>
    </div>
    <div style="width:100%;height:5px;background:#f3f1ef"></div>
    <!-- 变美历程 -->
    <div style="width:94%;margin:30px auto;">
      <p style="font-size:20px">变美历程</p>
      <!-- -------------------------1------------------ -->
      <div style="width:50%;margin-top:10px;height:30px;line-height:30px;float:left">
        <van-icon name="stop-circle-o" color="red" size="20"/>
        <span style="margin-left:10px">今天</span>
      </div>
      <div style="width:50%;margin-top:10px;height:30px;line-height:30px;float:left;font-size:14px;text-align:right">术后<span style="font-size:22px;color:#ec7c68">210</span>天</div>
      <div class="ping">
        <div class="six">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
        <div>眼综合+全脸脂肪填充后10个月前后对比，做完手术也有10个月左右了，现在恢复的很好了….</div>
        <p style="color:orange;font-size:12px">全文</p>
        <p style="text-align:right">
          <van-rate v-model="value2" icon="like" void-icon="like-o" :count="1" @click="num++"/>{{num}}
          <van-icon name="other-pay" />{{num2}}
        </p>
      </div>
      <!-- -------------------------2--------------------------->
      <div style="width:50%;margin-top:10px;height:30px;line-height:30px;float:left">
        <van-icon name="stop-circle-o" color="red" size="20"/>
        <span style="margin-left:10px">2020/10/09</span>
      </div>
      <div style="width:50%;margin-top:10px;height:30px;line-height:30px;float:left;font-size:14px;text-align:right">术后<span style="font-size:22px;color:#ec7c68">190</span>天</div>
      <div class="ping">
        <div class="six">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
        <div>眼综合+全脸脂肪填充后10个月前后对比，做完手术也有10个月左右了，现在恢复的很好了….</div>
        <p style="color:orange;font-size:12px">全文</p>
        <p style="text-align:right">
          <van-rate v-model="value2" icon="like" void-icon="like-o" :count="1" @click="num++"/>{{num}}
          <van-icon name="other-pay" />{{num2}}
        </p>
      </div>
      <!-- -------------------------3------------------ -->
      <div style="width:50%;margin-top:10px;height:30px;line-height:30px;float:left">
        <van-icon name="stop-circle-o" color="red" size="20"/>
        <span style="margin-left:10px">2020/06/09</span>
      </div>
      <div style="width:50%;margin-top:10px;height:30px;line-height:30px;float:left;font-size:14px;text-align:right">术后<span style="font-size:22px;color:#ec7c68">100</span>天</div>
      <div class="ping">
        <div class="six">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
        <div>眼综合+全脸脂肪填充后10个月前后对比，做完手术也有10个月左右了，现在恢复的很好了….</div>
        <p style="color:orange;font-size:12px">全文</p>
        <p style="text-align:right">
          <van-rate v-model="value2" icon="like" void-icon="like-o" :count="1" @click="num++"/>{{num}}
          <van-icon name="other-pay" />{{num2}}
        </p>
      </div>
    </div>
    <!-- 加载中 -->
    <div class="load">
      <van-loading size="18px">正在加载</van-loading>
    </div>
    <!-- 底部按钮 -->
    <button class="btn">继续写笔记</button>
  </div>

</template>

<script lang="ts" setup>
import { ref,reactive } from 'vue';
  let num=ref(300)
  let num2=ref(30)
  let value2=ref(0)
  let showShare=ref(false)
  let options = reactive([
    [
        { name: '微信', icon: 'wechat' },
        { name: '朋友圈', icon: 'wechat-moments' },
        { name: '微博', icon: 'weibo' },
        { name: 'QQ', icon: 'qq' },
        { name: 'QQ空间', icon: 'qq-space' },
    ],
    [
        { name: '删除日记本', icon: 'delete-o' },
        { name: '复制链接', icon: 'link' },
        { name: '举报', icon: 'warning-o' },
      ],
  ])

  let value=ref(0)
</script>

<style scoped>
  .load{
    width: 100%;
    text-align: center;
  }
  .six div{
    width: 30%;
    height: 60px;
    background: #fdf2f0;
    margin-bottom: 10px;
  }
  .six{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .ping{
    width: 96%;
    margin-top: 50px;
    box-sizing: border-box;
    padding: 10px;
  }
  .shop{
    display: inline-block;
    width: 60px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    color: white;
    background: #ec7b67;
    border-radius: 20px;
    margin-left: 45%;
  }
  .money{
    width: 100%;
    height: 80px;
    background: #fdf2f0;
    box-sizing: border-box;
    padding-top:10px ;
  }
  .kai{
    width: 60px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    background: #f2f2f2;
    font-size: 12px;
    margin: 10px 0;
    border-radius: 40px;
  }
  .suH{
    width:50px;
    background:#8cadc1;
    border-radius: 0 15px 15px 0;
    text-align: center;
    position: absolute;bottom: 0;left: 0;
  }
  .suQ{
    width:50px;
    background:#82b3cb;
    border-radius: 0 15px 15px 0;
    text-align: center;
    position: absolute;bottom: 0;left: 0;
  }
  .pic div{
    width: 48%;
    height: 100px;
    background: #fdf2f0;
  }
  .pic{
    width: 100%;
    margin-top: 10px;
    display:flex;
    justify-content: space-between;
  }
  .btn{
    width: 26%;
    height: 50px;
    border: none;
    background: #ec7b67;
    color: white;
    border-radius: 5px;
    position: fixed;bottom: 20px;left: 37%;
    z-index: 100;

  }
  .top{
    width: 100%;
    height: 40px;
    line-height: 40px;
    background: white;
    border-bottom: 1px solid #f2f2f2;
    position: fixed;top: 0; left: 0;
    z-index: 100;
  }
  .max{
    width: 100%;
    position: relative;
  }
</style>